<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>自定义表单分类</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="${ctx}/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="${ctx}/systemStatic/style/admin.css">
    <link rel="stylesheet" href="${ctx}/iconfont/iconfont.css"/>
    <link rel="stylesheet" href="${ctx}/css/public.css">
    <link rel="stylesheet" href="${ctx}/css/form.css">
</head>
<body>
<form class="layui-form" lay-filter="formData" id="formData">
    <div class="layui-btn-container" style="position: absolute;bottom: 0;left:37%">
        <a class="layui-btn layui-btn-sm" id="confirm">确定</a>
        <a class="layui-btn layui-btn-sm layui-btn-danger" id="return">取消</a>
    </div>
    <div style="position: relative;">
        <div class="layui-form-item" style="margin-top:3%;">
            <label class="layui-form-label">表单类型: </label>
            <div class="layui-unselect layui-form-select downpanel" style=" position: absolute;top:5%;left:123px;width: 200px;">
                <div class="layui-select-title">
                    <span class="layui-input layui-unselect" id="treeclass"
                          style="color:#000;line-height: 35px;"></span>
                    <input type="hidden" name="selectID" value="0">
                    <i class="layui-edge"></i>
                </div>
                <dl class="layui-anim layui-anim-upbit" style="width: 180px;max-height: 140px;">
                    <dd>
                        <ul id="classtree"></ul>
                    </dd>
                </dl>
            </div>
        </div>
    </div>
</form>
<script type="text/javascript">
    var __ctx = "${ctx}";
</script>
<script src="${ctx}/public/component.js" type="text/javascript"></script>
<script src="${ctx}/layui/layui.js"></script>
<script>
    layui.config({
        base: serverPath.formPath + staticPath.formPath //静态资源所在路径
    }).extend({
        index: 'index' //主入口模块
    }).use(['index','form', 'jquery', 'layer', 'tree', 'setter','commons'], function () {
        var form = layui.form;
        var layer = layui.layer;
        var setter = layui.setter;
        var tree = layui.tree;
        var $ = layui.$;
        var commons = layui.commons;
        var categoryId;
        form.render();
        var formKeys = '${formKeys}';
        //返回
        var index = parent.layer.getFrameIndex(window.name);
        $('#return').click(function () {
            parent.layer.close(index);
        });
        $(document).on('mouseenter', '.layui-tree li a cite', function () {
            $(".layui-tree li a cite").each(function (i) {
                $(this).removeClass("colorSwitch fontColor");
            });
            $(this).addClass("colorSwitch fontColor");
        }).mouseout(function () {
            $(this).removeClass("colorSwitch fontColor");
        });
        //确认 设置分类
        $('#confirm').click(function () {
            $.ajax({
                type: 'post',
                url: serverPath.formPath + setter.formLinkPath +"formDef/setCategory",
                dataType:'json',
                data: {"categoryId": categoryId,"formKeys": formKeys},
                success: function (result) {
                    if (commons._filterRecord(result)) {
                        layer.alert(result.msg,{skin: 'btn-class'}, function () {
                            parent.layui.table.reload('customForm', {
                                page: {
                                    curr: 1
                                }
                            });
                            parent.layui.totalFilter.init('customForm');
                            commons._bulletWindow(index);
                        });
                    } else {
                        layer.alert(result.msg,{skin: 'btn-class'});
                    }
                }
            });
        });

        $.ajax({
            type: 'post',
            url: serverPath.formPath + setter.sysLinkPath +"globalType/list",
            dataType:'json',
            data: {"catKey": "FORM_TYPE","hasRoot": "-1", "treeType": "1"},
            success: function (result) {
                tree.render({
                    elem: "#classtree",
                    data: result.data,
                    click: function (node) {
                        var $select = $($(this)[0].elem).parents(".layui-form-select");
                        $select.removeClass("layui-form-selected").find(".layui-select-title span").html(node.data.title).end().find("input:hidden[name='selectID']").val(node.data.categoryId);
                        categoryId = node.data.categoryId;
                    }
                });
            }
        });


        $(".downpanel").on("click", ".layui-select-title", function (e) {
            $(".layui-form-select").not($(this).parents(".layui-form-select")).removeClass("layui-form-selected");
            $(this).parents(".downpanel").toggleClass("layui-form-selected");
            layui.stope(e);
        }).on("click", "dl i", function (e) {
            layui.stope(e);
        });
    })
</script>
<style>
    .layui-tree li{
        width: 180px;
    }
    .layui-tree li a{
        display: inline-block;
        width: 180px;
    }
    .layui-tree li a cite{
        display: inline-block;
        width: 139px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .layui-tree li{
        overflow: visible;
    }
    .fontColor{
        color:#fff !important;
    }
</style>
</body>
</html>
